<template>
  <view class="container">
    <u-navbar
      :is-fixed="false"
      :border-bottom="false"
      :is-back="true"
      back-icon-name="arrow-leftward"
      title="订单确认"
      :background="{ background: '#fff' }"
      title-color="#000000"
    >
    </u-navbar>
    <u-toast ref="uToast" />
    <view class="cart-scroll">
      <view v-for="item in goodList" class="each-good">
        <view class="item u-border-bottom each-good" style="position: relative">
          <image mode="aspectFill" :src="imgUrl + item.good.cover" />
          <view class="title-wrap">
            <text class="title u-line-2">{{ item.good.name }}</text>
            <text class="title u-line-2">¥{{ item.good.price }}</text>
          </view>
          <u-number-box
            class="number"
            v-model="item.cnt"
            @change="valChange(item)"
          ></u-number-box>
        </view>
      </view>
    </view>
    <view class="pay">
      <view>
        <text style="font-size: 24rpx;">订单总金额</text>
        <text style="font-size: 24rpx;">¥</text>
        <text style="font-size: 30rpx;">{{ totalPrice }}</text>
      </view>
      <view>
        <text class="btn" @click="showModal">提交订单</text>
      </view>
    </view>
    <u-modal title="支付" v-model="show" :title-style="{color: '#000'}" show-cancel-button @confirm="submit" confirm-text="已完成付款" cancel-text="取消支付" @cancel="show = false">
			<view class="slot-content">
        <image class="img" src="/static/images/wyf/pay.png"></image>
        <u-upload :maxCount="1" ref="uUpload" :action="action"></u-upload>
			</view>
		</u-modal>
  </view>
</template>

<script>
import { addOrder } from "../../api/system/api";
import moment from "moment";
export default {
  data() {
    return {
      showSex: false,
      userInfo: {},
      key: "",
      goodList: [],
      imgUrl: "http://127.0.0.1:3000/",
      totalPrice: 0,
      show: false,
			action: 'http://127.0.0.1:3000/upload',
    };
  },
  onLoad(option) {
    this.goodList = JSON.parse(option.cart)
    this.userInfo = JSON.parse(option.userInfo)
    this.handlePrice()
  },
  methods: {
    handlePrice() {
      this.totalPrice = 0;
      let total = 0;
      let cartList = this.goodList
      for (let item of cartList) {
        total += item.cnt * item.good.price
      }
      this.totalPrice = total
    },
    valChange() {
      this.handlePrice()
    },
    submit() {
      if (this.totalPrice == 0) {
        this.$refs.uToast.show({
          title: '请选择商品',
        })
        return
      }
      if (!this.$refs.uUpload.lists.length) {
        this.$refs.uToast.show({
          title: '支付失败，请上传支付凭证',
        })
        return
      }
      this.show = true;
      addOrder({
        userId: this.userInfo.id,
        state: '待发货',
        aligntime: moment().format('YYYY-MM-DD HH:mm:ss'),
        goods: JSON.stringify(this.goodList),
        price: this.totalPrice,
        userName: this.userInfo.name,
        location: this.userInfo.location,
        payImg: this.$refs.uUpload.lists[0].response.imgName,
      }).then(res => {
        if (res.code == 200) {
          this.$refs.uToast.show({
            title: '下单成功,3秒后跳转至主页',
            type: 'success'
          })
          this.show = false;
          setTimeout(() => {
            this.$u.route('/pages/home/home')
            uni.switchTab({ url: `/pages/home/home` });
          }, 3000)
        }
      })
    },
    showModal() {
      this.show = true;
    }
  },
};
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  overflow: hidden;
  background: #fff3f3;
}

image {
  width: 120rpx;
  flex: 0 0 120rpx;
  height: 120rpx;
  margin-right: 20rpx;
  border-radius: 12rpx;
}

.container {
  background-color: #f7f7f7;
  min-height: calc(100% - 120rpx);
  overflow: hidden;
}
.number {
  position: absolute;
  right: 20rpx;
  bottom: 20rpx;
}
.btn {
  padding: 8rpx 20rpx;
  color: #fff;
  background: red;
  border-radius: 30rpx;
  margin-left: 30rpx;
}
.pay {
  width: 100%;
  position: fixed;
  bottom: 0;
  height: 120rpx;
  padding: 12rpx 20rpx;
  display: flex;
  justify-content: space-between;
  background: #fff;
  align-items: center;
}
.item {
  display: flex;
  padding: 20rpx;
}
.img {
  width: 600rpx;
  height: 800rpx;
}
</style>
